<template>
	<view class="uiwu">
		<uiwu-head-bar title="分销中心" titleColor="#FFF" />
		<view class="uiwu-user uiwu-flex-align">
			<image :src="items.avatar" mode="aspectFill"></image>
			<view class="info">
				<view class="name uiwu-flex-align">{{items.nickname}}<text v-if="items.is_vip" class="uiwu-flex-center">分销会员</text></view>
				<view class="tips">我的邀请人：{{items.spread_name}}</view>
			</view>
		</view>
		
		<view class="uiwu-money">
			<view class="uiwu-money-top uiwu-flex">
				<view class="uiwu-flex-column">
					<view class="left">可提现(元)</view>
					<view class="money">{{items.brokerage_price}}</view>
				</view>
				<view class="uiwu-flex">
					<view class="btn uiwu-flex-center" @tap="openWindow(`extract?money=${items.brokerage_price}`)">申请提现</view>
				</view>
			</view>
			<view class="uiwu-money-list uiwu-flex">
				<view class="uiwu-money-list-item">
					<text>今日收益</text>
					<view>
						<text>￥</text>
						<text>{{items.today_brokerage}}</text>
					</view>
				</view>
				<view class="uiwu-money-list-item">
					<text>本月收益</text>
					<view>
						<text>￥</text>
						<text>{{items.tomonth_brokerage}}</text>
					</view>
				</view>
				<view class="uiwu-money-list-item">
					<text>累计收益</text>
					<view>
						<text>￥</text>
						<text>{{items.total_brokerage}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="uiwu-fans uiwu-flex">
			<view @tap="openWindow('fans')" class="uiwu-fans-item uiwu-flex uiwu-flex-center">
				<view>我的粉丝({{items.spread_count}})</view>
				<uiwu-icon color="#CCCCCC" type="arrowright"></uiwu-icon>
			</view>
		</view>
		<view class="uiwu-fans uiwu-flex">
			<view class="uiwu-fans-item uiwu-flex uiwu-flex-center">
				<view>我的邀请码<text>({{items.invite_code}})</text></view>
				<view class="copy" @tap="uiwu.copy(items.invite_code)">复制</view>
			</view>
		</view>
		<view class="uiwu-list">
			<view class="uiwu-flex" style="flex-wrap: wrap;">
				<view class="uiwu-list-item" @tap="uiwu.openWindow('poster')">
					<image src="/static/fenxiaohaibao.png" mode="widthFix"></image>
					<text>邀请海报</text>
				</view>
				<view class="uiwu-list-item" @tap="uiwu.openWindow('order')">
					<image src="/static/fenxiaodingdan.png" mode="widthFix"></image>
					<text>收益明细</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { distribution } from '@/api/api';
	import { uiwu } from '@/config/config';
	import { ref } from "vue";
	const items = ref({})
	const openWindow = (url:string) :void =>{
		uiwu.openWindow(url)
	}
	const getDistribution = async () => {
		const {data} = await distribution()
		items.value = data
	}
	onLoad(()=>{
		getDistribution()
	})
</script>

<style lang="scss">
	page{
		background-color: #e6e6e6;
	}
	.uiwu{
		min-height: 494rpx;
		background: url(../../static/fenxiaobg.png) no-repeat 0 0;
		background-size: 100% auto;
		padding: 0 30rpx;
	}
	.uiwu-list{
		border-radius: 20rpx;
		background-color: #fff;
		padding-bottom: 30rpx;
		&-title{
			padding: 30rpx 40rpx;
			border-bottom: 1rpx dashed #f2f2f2;
			font-size: 32rpx;
			font-weight: bold;
			color: #222222;
		}
		&-item{
			width: calc(100% / 4);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding-top: 30rpx;
			
			image{
				width: 70rpx;
			}
			text{
				font-size: 28rpx;
				font-weight: normal;
				color: #222222;
				margin-top: 16rpx;
			}
		}
	}
	.uiwu-fans{
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 26rpx 0;
		align-items: center;
		&-item{
			height: 47rpx;
			flex: 1;
			line-height: 1;
			position: relative;
			&:nth-child(1){
				border-right: 1rpx solid #f2f2f2;
			}
			>view{
				font-size: 28rpx;
				font-weight: 400;
				color: #222222;
				text{
					color: #FA7820;
				}
			}
		}
		.copy{
			font-size: 24rpx;
			color: #FA7820;
			margin-left: 20rpx;
		}
	}
	.uiwu-money{
		width: 100%;
		height: 290rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		&-top{
			padding: 35rpx;
			padding-bottom: 0;
			justify-content: space-between;
			align-items: center;
			.left{
				font-size: 24rpx;
				font-weight: 500;
				color: #666666;
			}
			.money{
				font-size: 32rpx;
				font-weight: 500;
				color: #EF821E;
				margin-top: 12rpx;
			}
			.uiwu-felx{
				align-items: center;
				text{
					font-size: 32rpx;
					font-weight: 600;
					color: #FA7820;
					&:nth-child(1){
						font-size: 24rpx;
					}
				}
			}
			.btn{
				width: 160rpx;
				height: 58rpx;
				background: #EF821E;
				border-radius: 29rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
		&-list{
			padding: 30rpx 35rpx;
			
			&-item{
				flex: 1;
				text-align: center;
				position: relative;
				&::after{
					content: "";
					position: absolute;
					right: 0;
					width: 1rpx;
					height: 50rpx;
					background: #DDDDDD;
					top: 50%;
					margin-top: -20rpx;
				}
				&:last-child{
					&::after{
						width: 0;
					}
				}
				>text{
					font-size: 24rpx;
					font-weight: normal;
					color: #333333;
					opacity: 0.8;
				}
				view{
					margin-top: 10rpx;
					text{
						font-size: 32rpx;
						font-weight: 600;
						color: #222222;
						&:nth-child(1){
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
	.uiwu-user{
		height: 182rpx;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.info{
			margin-left: 30rpx;
			.name{
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				text{
					width: 118rpx;
					height: 32rpx;
					background: rgba(0,0,0,0.47);
					border-radius: 16rpx;
					border: 2rpx solid #000000;
					font-size: 22rpx;
					font-weight: 500;
					margin-left: 24rpx;
				}
			}
			.tips{
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(#FFFFFF,0.8);
				margin-top: 6rpx;
			}
		}
	}
	
</style>
